<template>
	<view class="smart-page">
		<!-- 页面标题头begin -->
		<view class="smart-page-head">
			<view class="smart-page-head-title">slider滑块</view>
		</view>
		<!-- 页面标题头end -->
		<view>显示当前view</view>
		<view><slider value="20" show-value="true" @change="sliderChange"></slider></view>
		<view>设置步长step</view>
		<view><slider value="20" show-value="true" @change="sliderChange" step="5"></slider></view>
		<view>设置最大值、最小值</view>
		<view><slider value="100" show-value="true" ></slider></view>
		<view>设置颜色</view>
		<slider activeColor="#4cd964" backgroundColor="#aa0000" block-color="#f0ad4e" block-size="15"></slider>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			/* 改变当前slider值，触发事件函数 */
			sliderChange(e){
				console.log('当前value值是:'+e.detail.value);
			}
		}
	}
</script>

<style>

</style>
